import { Graph, NodeData } from "@antv/g6";
import { useCallback, useEffect, useRef } from "react";

interface INodeData extends NodeData {
  data?: { label: string; width: number; height: number };
}

const ChartDemo1 = () => {
  const ref = useRef<HTMLDivElement & { graph?: Graph }>(null);

  const getData = useCallback(() => {
    return fetch("https://assets.antv.antgroup.com/g6/combo.json")
      .then((res) => res.json())
      .then((data) => {
        const graph = ref.current.graph;
        graph.setData(data);
        graph.render();
      });
  }, []);

  useEffect(() => {
    const graph = new Graph({
      container: ref.current,
      background: "#F2F7FA",
      autoFit: "center",
      layout: {
        type: "combo-combined",
        comboPadding: 2,
      },
      node: {
        style: {
          size: 20,
          labelText: (d) => d.id,
        },
        palette: {
          type: "group",
          field: (d) => d.combo as string,
        },
      },
      edge: {
        style: (model) => {
          const { size, color } = model.data as { size: number; color: string };
          return {
            stroke: color || "#99ADD1",
            lineWidth: size || 1,
          };
        },
      },
      behaviors: ["drag-element", "drag-canvas", "zoom-canvas"],
      animation: false,
    });
    ref.current.graph = graph;
    graph.render();

    getData();
  }, []);

  return (
    <>
      <h2>官方：组合布局</h2>
      <div ref={ref} style={{ width: "100%", minHeight: 600 }}></div>
    </>
  );
};

export default ChartDemo1;
